<template>
	<view :class="['non',flexend?'flexend':'',type==16?'onorder':'']">
		<view>
			<view class="non-img" v-if="defaultdata.imgurl!=''">
				<image :src="defaultdata.imgurl"  mode="widthFix"></image>
			</view>
			<view class="txt" :style="{'margin-top':marginT}">{{defaultdata.text}}</view>
		</view>
	</view>
</template>

<script>
	var defaultList=[
		{
			imgurl:"/static/img/default/404.png",
			text:"404",
			id:"0"
		},
		{
			imgurl:"/static/img/default/developing.png",
			text:"开发中",
			id:"1"
		},
		{
			imgurl:"/static/img/default/non-acti.png",
			text:"暂无动态",
			id:"2"
		},
		{
			imgurl:"/static/img/default/non-bank.png",
			text:"未绑银行卡",
			id:"3"
		},
		{
			imgurl:"/static/img/default/non-comment.png",
			text:"暂无评论",
			id:"4"
		},
		{
			imgurl:"/static/img/default/non-fail.png",
			text:"数据加载失败",
			id:"5"
		},
		{
			imgurl:"/static/img/default/non-focus.png",
			text:"暂无关注",
			id:"6"
		},
		{
			imgurl:"/static/img/default/non-friend.png",
			text:"暂无好友",
			id:"7"
		},
		{
			imgurl:"/static/img/default/non-msg.png",
			text:"暂无通知",
			id:"8"
		},
		{
			imgurl:"/static/img/default/non-order.png",
			text:"暂无出借订单",
			id:"9"
		},
		{
			imgurl:"",
			text:"暂无商品",
			id:"10"
		},
		{
			imgurl:"/static/img/default/non-record.png",
			text:"暂无记录",
			id:"11"
		},
		{
			imgurl:"/static/img/default/non-redp.png",
			text:"暂无红包",
			id:"12"
		},
		{
			imgurl:"/static/img/default/non-coupon.png",
			text:"暂无卡劵",
			id:"13"
		},
		{
			imgurl:"/static/img/default/sofa.png",
			text:"抢沙发",
			id:"14"
		},
		{
			imgurl:"/static/img/default/non-network.png",
			text:"暂无网络",
			id:"15"
		},
		{
			imgurl:"/static/img/noorder.png",
			text:"没有相关订单",
			id:"16"
		}
	]
	export default {
		data() {
			return {
				defaultList:defaultList,
				defaultdata:""
			};
		},
		props:{
			type:[String,Number],
			text:String,
			mt:String,
			flexend:[String,Number]
		},
		computed: {
			marginT(){
				return `${this.mt}px`
			},
			hasNetwork(){
				return this.$store.state.isConnected
			}
		},
		created(){
			this.init()
		},
		methods:{
			init(){
				let type=this.type;
				let _thisItem=defaultList.find((item, index)=>{
					return item.id==type
				})
				if(this.text){
					_thisItem.text=this.text;
				}
				this.defaultdata=_thisItem
			}
		},
		watch:{
			type(newValue,oldVale){
				this.init()
			},
			hasNetwork(newValue,oldValue){
				console.log(newValue)
				if(newValue){
					this.init()
				}else{
					this.defaultdata=defaultList[15]
				}
			}
		}
	}
</script>

<style lang="scss">
	.non{text-align: center;display: flex;align-items: center;justify-content: center;height: 100%;}
	.non-img image{width: 280upx;height:240upx; }
	.txt{font-size: 28upx;color: #8f8f8f; }
	.flexend{align-items: flex-end;}
	/* 没有订单 */
	.onorder {
		width: 100%;
		height: 50vw;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		.non-img{overflow:hidden;
			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
		}
		.txt {
			width: 100%;
			height: 60upx;
			font-size: 28upx;
			color: #444;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}	
</style>
